<template>
  <div class="app-container">
    <div class="filter-container">
      <div class="float-right">
        <el-button
          type="primary"
          @click="openAddMemoFrom"
        >添加备注</el-button>
      </div>
      <div class="clearfix"></div>
    </div>
    <div
      class="item"
      v-for="(item,index) in remarkData"
      :key="index"
    >
      <div class="items">
        {{item.remark}}
      </div>
      <div class="items-tips">
        <span>
          备注来源:{{item.type}}
        </span>
        <span>
          备注人:{{item.operator}}
        </span>
        <span>
          {{formatTime(item.createTime)}}
        </span>
      </div>
    </div>

    <el-dialog
      title="添加备注"
      :visible.sync="dialogAddMemo"
      width="50%"
      center
    >
      <el-form
        :model="addMemberData"
        :rules="rules"
        ref="addMemberData"
      >
        <el-form-item
          label="原因"
          :label-width="formLabelWidth"
          prop="reason"
        >
          <el-input
            type="text"
            v-model="addMemberData.reason"
            placeholder="请输入沟通原因"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="内容"
          :label-width="formLabelWidth"
          prop="remark"
        >
          <el-input
            type="textarea"
            :rows="5"
            v-model="addMemberData.remark"
            placeholder="请输入沟通内容"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="添加来源"
          :label-width="formLabelWidth"
          prop="radio"
        >
          <el-radio-group v-model="addMemberData.radio">
            <el-radio :label="1">电话反馈 </el-radio>
            <el-radio :label="2">APP反馈</el-radio>
            <el-radio :label="3">公众号</el-radio>
            <el-radio :label="4">小红书</el-radio>
            <el-radio :label="5">天猫</el-radio>
            <el-radio :label="6">微信</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="dialogAddMemo = false">取 消</el-button>
        <el-button
          type="primary"
          @click="addMemoForm('addMemberData')"
        >确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>
<script>
import { fetchRmark, fetchAddRmark } from "@/api/table";
import format from "date-format";

export default {
  data() {
    return {
      dialogAddMemo: false,
      formLabelWidth: "80px",
      addMemberData: {
        remark: "",
        radio: "",
        reason: ""
      },
      remarkData: [],
      rules: {
        reason: [{ required: true, message: "请输入原因", trigger: "blur" }],
        remark: [{ required: true, message: "请输入备注", trigger: "blur" }],
        radio: [{ required: true, message: "请选择来源", trigger: "change" }]
      }
    };
  },
  created() {
    this.initData();
  },
  methods: {
    initData() {
      this.getRmarkData();
    },
    formatTime(e) {
      return format("yyyy-MM-dd hh:mm:ss", new Date(e));
    },
    openAddMemoFrom() {
      this.dialogAddMemo = true;
      this.addMemberData.remark = "";
      this.addMemberData.radio = "";
      this.addMemberData.reason = "";
    },
    addMemoForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.addRmarkData();
          this.dialogAddMemo = false;
        } else {
          return false;
        }
      });
    },
    async addRmarkData() {
      const addremark = await fetchAddRmark({
        userId: this.$route.query.userId,
        remark: this.addMemberData.remark,
        source: this.addMemberData.radio,
        reason: this.addMemberData.reason
      });
      this.getRmarkData();
      this.$message({
        type: "success",
        message: "添加成功!"
      });
    },
    async getRmarkData() {
      const remark = await fetchRmark({
        userId: this.$route.query.userId
      });
      this.remarkData = [];
      remark.data.remarkData.forEach(item => {
        const remark = {};
        remark.remark = item.remark;
        remark.createTime = item.createTime;
        remark.operator = item.operator;
        if (item.source == "1") {
          remark.type = "电话反馈";
        } else if (item.source == "2") {
          remark.type = "APP反馈";
        } else if (item.source == "3") {
          remark.type = "公众号";
        } else if (item.source == "4") {
          remark.type = "小红书";
        } else if (item.source == "5") {
          remark.type = "天猫";
        } else if (item.source == "6") {
          remark.type = "微信";
        }
        this.remarkData.push(remark);

        this.remarkData.sort((i, e) => {
          return i.createTime < e.createTime ? 1 : -1;
        });
      });
    }
  }
};
</script>
<style lang="less" scoped>
.item {
  border: 1px solid rgba(223, 223, 223, 0.8);
  border-radius: 5px;
  overflow: hidden;
  margin: 10px 0;
}
.items {
  padding: 20px 20px;
  &-tips {
    display: flex;
    justify-content: flex-end;
    border-top: 1px solid rgba(223, 223, 223, 0.8);
    background-color: rgba(223, 223, 223, 0.5);
    padding: 5px 10px;
    span {
      margin: 0 5px;
    }
  }
}
</style>

